初學 ESLint


Posted by estella00911 on 2021-04-26

每個人都有不一樣的 code 風格,或者是在初學的時候,縮排有的會使用 tab 或 space ,此時 ESLint(程式碼規範檢查工具(Linter))就派上用場嚕!可以規範大家的 coding style。

環境設置 與 ESLint安裝與初始化

1. 執行環境:

Node.js
下載 Node.js執行環境,讓 JavaScript 可以在瀏覽器之外的地方執行,網頁有 LTS 跟 current 兩個版本,LTS 為穩定版本,current 為最新版本,只要下載 LTS 版本即可。
安裝完成後,重新打開 Cmder(windows) 或 terminal(MacOs) 後:

$ node -v
v14.16.1  // 出現版本,安裝成功

2. npm 簡介

npm 是 Node Package Manager 的縮寫,可以利用 Node 透過 npm 套件的安裝及管理。

$ npm install // 安裝 npm
//移動到專案底下
$ npm init // 會有初始設定,先按 enter 完成設定,而且會產生package.json 檔案

舉例:mathjs套件使用

$ npm install mathjs // 安裝 JavaScript 的數學套件
$ ls
package.json node_modules package-lock.json // 安裝完後,多了兩個檔案
//開一個新的 js 檔案
var math = require('mathjs') // 引用套件,並將 var 設為 math
console.log(math.sqrt(-4); // 類似 python 引用數據庫,就可以做 負數的開根號

package.json:紀錄套件
node_modules:從這個資料夾引用套件,通常會放在 .gitignore,因為有時使用的套件太多,放在 GitHub 會檔案太大,而且有 package.json 跟 package-lock.json 紀錄,所以當下載專案,執行 npm install,把需要的套件載下來。

3. ESLint

由 ES 和 lint 合成,lint 為語法檢查工具,ES 為 ECMAScript 簡稱,國際認定的標準語言規範,所以 ESLint 就是檢查 JavaScript 語法的工具。

$ npm install  //安裝 
...//安裝中
husky setting up git hooks // 在 git 內,執行 hook,在 commit 之前檢查語法。
... // 安裝完成

//編輯完 js 檔案,想要 commit:
$ git commit -m 'test'
✔ Preparing...  // 語法檢查ing
✔ Hiding unstaged changes to partially staged files...
⚠ Running tasks...

#ESLint #node.js #beginner







Related Posts

SSR vs CSR

SSR vs CSR

2. 架構完整的 React 專案結構

2. 架構完整的 React 專案結構

Return first capital letter and its index

Return first capital letter and its index


Comments